<template>
  <div>
    <div class="box">
      <select v-model="selt">
        <option value="0" disabled>请选择</option>
        <option v-for="(v,i) in options" :key="i" :value="i+1">{{v}}</option>
      </select>
      <input type="text" v-focus ref="ipt" v-model="iptVal" />
      <button @click="submit">提交</button>
    </div>
    <div v-for="(v,i) in itemData" :key="i" class="list">
      <ul v-if="v.item.length" style="margin-top:10px;border:1px solid #000;">
        <div>
          <input :checked="v.isChecked" @change="checkAllFun(v.item,v)" type="checkbox" />
          {{v.title}}
        </div>
        <li>
          <div
            style="float: left; width:100px;height:150px;margin-left:10px; border:1px solid #000;"
            v-for="(item,index) in v.item"
            :key="index"
          >
            <img
              style="width:100px;height:100px;"
              :src="require(`../../imgs/${item.photo}.jpg`)"
              alt
            />
            <br />
            <footer>
              <input
                v-model="v.check"
                :value="item"
                @change="checkFun(item,v.item,v)"
                type="checkbox"
              />
              <h1 style="text-align: center;  font-size: 100%;font-weight: normal">{{item.name}}</h1>
            </footer>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: ["学习用品", "生活用品", "体育用品", "野炊用品", "医学用品"],
      selt: "0",
      iptVal: "",
      itemData: [
        {
          title: "学习用品",
          item: [{ name: "qweqe", photo: "9-13", checked: false }],
          isChecked: false,
          check: []
        },
        {
          title: "生活用品",
          item: [],
          isChecked: false,
          check: []
        },
        {
          title: "体育用品",
          item: [],
          isChecked: false,
          check: []
        },
        {
          title: "野炊用品",
          item: [],
          isChecked: false,
          check: []
        },
        {
          title: "医学用品",
          item: [],
          isChecked: false,
          check: []
        }
      ]
    };
  },
  methods: {
    submit() {
      this.itemData[this.selt - 1].item.push({
        name: this.iptVal,
        photo: "9-13",
        checked: false,
        check: []
      });
      this.$refs.ipt.focus();
      this.iptVal = "";
      this.selt = "0";
    },
    checkAllFun(data, v) {
      v.isChecked = !v.isChecked;
      if (v.isChecked) {
        data.forEach(item => {
          if (v.check.indexOf(item) == -1) {
            v.check.push(item);
          }
        });
      } else {
        v.check = [];
      }
    },
    checkFun(item, Alldata, v) {
      if (typeof item.checked == "undefined") {
        this.$set(item, "checked", true);
      } else {
        item.checked = !item.checked;
      }
      if (v.check.length == Alldata.length) {
        v.isChecked = true;
      } else {
        v.isChecked = false;
      }
    }
  },
  directives: {
    focus: {
      inserted(el) {
        el.focus();
      }
    }
  }
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}

.box {
  display: flex;
}

.box select {
  height: 30px;
}
.box input {
  height: 27px;
}
.box button {
  width: 50px;
  height: 30px;
  background-color: #00f;
  border: none;
  color: #ffffff;
}

.list ul {
  display: flow-root;
}

.list ul li {
  display: inline-block;
  list-style: none;
}

footer input {
  float: left;
  margin-top: 10px;
  margin-left: 5px;
}

footer h1 {
  float: left;
  margin-top: 6px;
  margin-left: 10px;
}
</style>